import React from "react";
import PropTypes from "prop-types";
const Sister = ({ name, details }) => {
    return (
        <div>
            <h1>Sister</h1>
            <h1>{name}</h1>
            <h2>{details.age}</h2>
            <h2>{details.hobby}</h2>
        </div>
    );
};
// 定义 propTypes
Sister.propTypes = {
    //     PropTypes.number : 检查是否为数字。
    // -  PropTypes.bool : 检查是否为布尔值。
    // -  PropTypes.array : 检查是否为数组。
    // -  PropTypes.object : 检查是否为对象。
    // -  PropTypes.func : 检查是否为函数。
    // -  PropTypes.node : 检查是否为可以渲染的内容（字符串、数字、React 元素等）。
    // -  PropTypes.element : 检查是否为 React 元素。
    // -  PropTypes.oneOf : 限制 props 为特定值之一。
    //   propTypes.oneOf(['value1', 'value2', 'value3']).isRequired,

    // -  PropTypes.oneOfType : 限制 props 为多种类型中的一种
    name: PropTypes.string.isRequired, // 限制 name 为字符串且为必填项
    details: PropTypes.shape({
        age: PropTypes.number,
        hobby: PropTypes.string,
    }),
};

// 定义默认值
Sister.defaultProps = {
    name: "Unnamed Sister",
    details: {
        age: 12,
        hobby: "None"
    }
};
const CheckProps = () => {
    return (
        <div>
            <h1>CheckProps</h1>
            <Sister
                name={"name"}
                details={{
                    age: 18,
                    hobby: "play game"
                }}
            ></Sister>
        </div>
    );
};

export default CheckProps;
